'use client';

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import Link from 'next/link';
import { useSharedData } from '@/modules/application/sharedDataContext';

export default function SharedDataSecondPage() {
  const { userInfo, theme, notifications, addNotification, clearNotifications } = useSharedData();

  const handleAddNotification = () => {
    addNotification(`Notification from second page at ${new Date().toLocaleTimeString()}`);
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
      <div className="max-w-4xl mx-auto space-y-8">
        <h1 className="text-3xl font-bold">Shared Data - Second Page</h1>
        
        <Card>
          <CardHeader>
            <CardTitle>Shared User Information</CardTitle>
            <CardDescription>Data shared from the first page</CardDescription>
          </CardHeader>
          <CardContent>
            {userInfo ? (
              <div className="space-y-2">
                <p><strong>Name:</strong> {userInfo.name}</p>
                <p><strong>Email:</strong> {userInfo.email}</p>
              </div>
            ) : (
              <p className="text-gray-500 italic">No user information set yet</p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Shared Theme</CardTitle>
            <CardDescription>Current theme set in the application</CardDescription>
          </CardHeader>
          <CardContent>
            <p>Current theme: <strong className="capitalize">{theme}</strong></p>
            <p className="text-sm text-gray-500 mt-2">
              Change the theme on the first page to see it update here as well
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Shared Notifications</CardTitle>
            <CardDescription>Notifications added on any page</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex space-x-2">
              <Button onClick={handleAddNotification}>Add Notification from This Page</Button>
              <Button variant="outline" onClick={clearNotifications}>Clear All Notifications</Button>
            </div>
            
            <div className="space-y-2">
              <h3 className="font-medium">Notification History:</h3>
              {notifications.length > 0 ? (
                <ul className="space-y-2">
                  {notifications.map((notification, index) => (
                    <li key={index} className="p-2 bg-gray-100 dark:bg-gray-800 rounded-md">
                      {notification}
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-gray-500 italic">No notifications yet</p>
              )}
            </div>
          </CardContent>
        </Card>

        <div className="flex space-x-4">
          <Button asChild>
            <Link href="/shared-data-demo">Back to First Page</Link>
          </Button>
        </div>
      </div>
    </div>
  );
}